<template>
	<view v-if="toastList.length > 0" class="toast-container">
		<view v-for="(toast, index) in toastList" :key="index" class="toast-content-wrapper" :style="{ top: `${20 + index * 10}%` }">
			<view class="toast-content" :class="[toast.typeClass, toast.customClass]" v-if="toast.isVisible">
				<!-- 信息图标 -->
				<text v-if="toast.type === 'info'" class="icon">
					<image src="./info.png" />
				</text>
				<!-- 警告图标 -->
				<text v-else-if="toast.type === 'warn'" class="icon"><image src="./warn.png" /></text>
				<!-- 加载中图标 -->
				<view v-else-if="toast.type === 'loading'" class="loading-icon"></view>
				<!-- 成功图标 -->
				<text v-else-if="toast.type === 'success'" class="icon"><image src="./success.png" /></text>
				<!-- 错误图标 -->
				<text v-else-if="toast.type === 'error'" class="icon"><view class="text-icon">✕</view></text>
				<!-- 消息内容 -->
				<text class="toast-message">{{ toast.message }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, onUnmounted } from 'vue';
import { config } from '../../../config';

type ToastType = 'info' | 'success' | 'error' | 'loading' | 'warn';
type ToastPosition = 'top' | 'center' | 'bottom';

interface ToastItem {
	message: string;
	type: ToastType;
	position: ToastPosition;
	duration: number;
	customClass: string;
	typeClass: string;
	isVisible: boolean;
	isLoaded: boolean;
	timer?: NodeJS.Timeout;
}

// Toast 列表
const toastList = ref<ToastItem[]>([]);

const show = (options: { message: string; type?: ToastType; duration?: number; position?: ToastPosition; customClass?: string }) => {
	// 如果超过3个，则清空全部
	if (toastList.value.length >= 3) {
		clearAll();
	}

	// 添加新的 Toast
	const newToast: ToastItem = {
		message: options.message,
		type: options.type || 'info',
		duration: options.duration || 2000,
		position: options.position || 'top',
		customClass: options.customClass || '',
		typeClass: `toast-${options.type || 'info'}`,
		isVisible: true,
		isLoaded: false
	};

	toastList.value.push(newToast);
	if (newToast.duration > 0) {
		newToast.timer = setTimeout(() => {
			removeToast(newToast);
		}, newToast.duration);
	}
};

const removeToast = (toast: ToastItem) => {
	if (!toast.timer) {
		return;
	}
	clearTimeout(toast.timer);
	toast.timer = undefined; 
	toast.isVisible = false;
	console.log(JSON.stringify(toast));
	toastList.value = toastList.value.filter((t) => t !== toast);
};

const clearAll = () => {
	// 清除所有定时器
	toastList.value.forEach((toast) => {
		if (toast.timer) {
			clearTimeout(toast.timer);
			toast.timer = undefined;
		}
	});
	toastList.value = [];
};

onUnmounted(() => {
	clearAll();
});

defineExpose({ show, clearAll });
</script>

<style lang="scss">
.toast-container {
	position: fixed;
	left: 0;
	right: 0;
	top: 10%;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	pointer-events: none;
	z-index: 9999;
}

.toast-content-wrapper {
	margin-top: 2.5%;
	display: flex;
	justify-content: center;
}

.toast-content {
	min-width: 65%;
	padding: 15rpx 25rpx;
	background-color: #000000;
	opacity: v-bind('config.opacity.toast');
	border-radius: 8rpx;
	color: v-bind('config.fontColor.reversal');
	font-size: 28rpx;
	display: flex;
	align-items: center;
	max-width: 70%;
	box-sizing: border-box;
	line-height: 1.5;

	.icon {
		margin-right: 16rpx;
		font-size: 36rpx;
		image {
			margin: auto;
			width: 32rpx;
			height: 32rpx;
			margin-top: 10rpx;
		}
		.text-icon {
			display: block;
			margin-top: -8rpx;
		}
	}
	.toast-message {
		margin-left: 20rpx;
		text-align: left;
		display: flex;
		align-items: center;
	}

	.loading-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
		border: 4rpx solid #fff;
		border-top-color: transparent;
		border-radius: 50%;
		animation: rotating 1s linear infinite;
		display: flex;
		align-items: center;
	}

	&.toast-info {
		background-color: v-bind('config.backgroundColor.info');
	}

	&.toast-success {
		background-color: v-bind('config.backgroundColor.succeed');
	}

	&.toast-error {
		background-color: v-bind('config.backgroundColor.delete');
	}

	&.toast-warn {
		background-color: v-bind('config.backgroundColor.warn');
	}

	&.toast-loading {
		background-color: #000000;
		opacity: v-bind('config.opacity.toast');
	}
}

@keyframes rotating {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
</style>
